<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios-0.18.0.js"></script>
		<script src="js/jquery.min.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style>
			body {
				background-image: url('./img/login_telanpu.gif');
			}

			#form {
				margin: auto;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				width: 500px;
				height: 300px;
				border-radius: 20px;
				
			}

			h1 {
				color: #333333;
			}
			.el-input__inner{
				background-color: #00000040;
				color:white;
				font-weight: bolder;
				letter-spacing: 2px;
			}
		
		</style>
	</head>
	<body>
		<div id="app">
			<div id="form">
				<center>
					<h1>AdminLogin</h1>
					<el-form :model="Admin" label-width="120px" class="demo-ruleForm">
						<el-form-item label="用户名">
							<el-col :span="16">
								<el-input type="text" v-model="Admin.username" class="username"></el-input>
							</el-col>
						</el-form-item>
						<el-form-item label="密码">
							<el-col :span="16">
								<el-input type="password" v-model="Admin.password" class="password"></el-input>
							</el-col>
						</el-form-item>
						<el-form-item label-width="0px">
							<el-button type="primary" @click="submitForm()">登陆</el-button>
							<el-button @click="resetForm()">重置</el-button>
						</el-form-item>
					</el-form>
				</center>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data: {
				labelPosition: 'right',
				Admin: {
					username: '',//用户名
					password: '',//密码
				}
			},
			methods: {
				submitForm(formName) { //用户登陆的方法

					//console.log("用户登录")
					axios.post("/login",this.Admin).then(resp=>{
						// console.log(resp.data)
						if (resp.data.flag){
							this.$message({
								type:"success",
								message:"登录成功!"
							})
							//跳转到登录页面
							window.open("/eduFile.html");
						}else {
							this.$message({
								type:"error",
								message:resp.data.message
							})
						}
					})
				},
				resetForm(formName) { //清空表单的方法
					this.Admin = {}
				}
			},
			mounted() {

			}
		})
	</script>
</html>
